<template>
  <div class="box">
    <div class="nocart" v-if="show">
      <van-empty description="购物车空空如也" />
      <van-button class="btn-goshop" color="red" @click="goShopping"> 立即购物 </van-button>
    </div>
    <div class="cartlist" v-if="show1">
      <van-swipe-cell
        class="swipe-cell"
        :key="item.proid"
        v-for="item in goodslist"

      >
        <div class="cell-left">
          <van-checkbox class="checkbox"  @click="check(item.cartid,item.flag)" v-model="item.flag" />
        </div>

        <van-card
          class="goodscard"
          :price="item.originprice"
          :title="item.proname"
          :thumb="item.img1"
        >
          <template #footer>
            <van-button class="btnjian" color="red" plain size="mini"
            @click="reduce(item.cartid,item.num)"
              >-</van-button
            >
            <span class="shuliang">{{ item.num }}</span>
            <van-button class="btnjia" color="red" size="mini" @click="add(item.cartid,item.num,item.discount)">+</van-button>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="delet(item.cartid)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      快点来看看
    </van-divider>
    <DetailVue></DetailVue>
  </div>
</template>

<script>
import DetailVue from "@/components/Detail.vue";
export default {
  name: "CartList",
  components: {
    DetailVue,
  },
  data() {
    return {
      goodslist: [],
      checked: true,
      show: false,
      show1: true,
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.userid = sessionStorage.getItem("userid");

    console.log("userid", this.userid);

    this.$service({
      method: "post",
      url: "api/cart/list",
      headers: { token: this.token },
      data: `userid=${this.userid}`,
    }).then((res) => {
      console.log("res.data", res.data);

      if (res.data.code == 200) {
        this.show = false;
        this.show1 = true;
        this.goodslist = res.data.data;
      }
      if (res.data.code == 10020) {
        this.show = true;
        this.show1 = false;
       
        
      }
    });
  },
  methods: {
    delet(cartid) {
      this.$service({
        method: "post",
        url: "api/cart/remove",
        headers: { token: this.token },
        data: `cartid=${cartid}`,
      }).then((res) => {
        console.log("res.data", res.data);
        if (res.data.code == 200) {
          window.location.reload();
        }
      });
    },
    add(cartid, num, discount) {
      console.log('discount',discount);
      
      num>discount-1?num=discount:num++
      this.$service({
        method: "post",
        url: "api/cart/updatenum",
        headers: { token: this.token },
        data: `cartid=${cartid}&num=${num}`,
      }).then((res) => {
        console.log("res.data", res.data);
        if (res.data.code == 200) {
          window.location.reload();
        }
      });
    },
    reduce(cartid, num) {
     num<2? num=1:num--
      this.$service({
        method: "post",
        url: "api/cart/updatenum",
        headers: { token: this.token },
        data: `cartid=${cartid}&num=${num}`,
      }).then((res) => {
        console.log("res.data", res.data);
        if (res.data.code == 200) {
          window.location.reload();
        }
      });
    },
    check(cartid,f) {
      let flag = f
      console.log("flag",flag)
      this.$service({
        method: "post",
        url: "api/cart/selectone",
        headers: { token: this.token },
        data: `cartid=${cartid}&flag=${flag}`,
      }).then((res) => {
        console.log("res.data", res.data);
        if (res.data.code == 200) {
          window.location.reload();
        }
      });
    },
    
    goShopping() {
      this.$router.push("/");
    }
  },
};
</script>
<style scoped>
.box {
  text-align: center;
}

.delete-button {
  height: 100%;
}
.btnjia,
.btnjian {
  height: 1.2rem;
  vertical-align: middle;
  border-radius: 100%;
  font-size: 1.3rem;
}
.shuliang {
  margin: 1rem;
  font-size: 1rem;
  vertical-align: middle;
}
.swipe-cell {
  background-color: #fafafa;
  margin-bottom: 0.1rem;
}
.cell-left {
  width: 10%;
  float: left;
  margin-top: 3rem;
  margin-left: 0.6rem;
}

.goodscard {
  transform: translateX(2rem);
  width: 90%;
}
</style>

